/**
 * 图片上传组建
 */
import React from 'react';
import { Upload, Button, Icon, message } from 'antd';
import previewImg from 'components/common/ImgPreview';
import { looseEqual, getServer } from 'utils/share';

const  baseUrl = getServer()['admin'];

const defaultFileList = {
  uid: 0,
  name: '',
  status: 'done',
  isReturn: true,
  url: ''
};
// const getAttachId = (url) => {
//   const arr = url.split('/');
//   const nameUrl = arr[arr.length - 1];
//   const arrTwo = nameUrl.split('.');
//   return arrTwo[0];
// };
const handleList = (pic) => {
  const fileLists = [];
  if (Array.isArray(pic)) {
    pic.forEach((url, uid) => {
      fileLists.push({ ...defaultFileList, url, uid });
    });
  } else {
    fileLists.push({ ...defaultFileList, url: pic });
  }
  return fileLists;
};

const uploadBtn = (
  <div>
    <Button>
      <Icon type="upload" />上传附件
    </Button>
  </div>
);
export default class PicUpload extends React.Component {
  static defaultProps={
    uploadButton: uploadBtn, // 上传button
    picLength: 1, // 上传最大张数
    fileBizType: 'resource', // 配置参数
    listType: 'picture-card' // 图片上传样式类型，详见antd
  };
  constructor(props) {
    super(props);
    const pic = props.pic || '';
    let fileLists = [];
    if (pic) {
      fileLists = handleList(pic);
    }
    this.state = {
      pic,
      fileLists,
      uploading: false,
      previewImage: ''
    };
    this.onRemove = this.onRemove.bind(this);
    this.handleUploadChange = this.handleUploadChange.bind(this);
    this.formatImgData = this.formatImgData.bind(this);
  }
  componentDidMount() {
    const fileLists = [];
    const { pic } = this.state;
    if (Array.isArray(pic)) {
      pic.forEach((url, uid) => {
        fileLists.push({ ...defaultFileList, url, attachId: url, uid });
      });
    } else {
      fileLists.push({ ...defaultFileList, url: pic, attachId: pic });
    }
  }
  componentWillReceiveProps({ pic }) {
    const fileLists = [];
    if (!looseEqual(pic, this.props.pic)) {
      if (pic) {
        if (Array.isArray(pic)) {
          pic.forEach((url, uid) => {
            fileLists.push({ ...defaultFileList, url: baseUrl + url, attachId: url, uid });
          });
        } else {
          fileLists.push({ ...defaultFileList, url: baseUrl + pic, attachId: pic });
        }
        this.setState({ fileLists });
        this.setState({ pic });
      } else {
        this.setState({
          pic: '',
          fileLists: []
        });
      }
    }
  }
  onRemove(file) {
    const { fileLists } = this.state;
    const { onChange } = this.props;
    const index = fileLists.indexOf(file);
    const newFileList = fileLists.slice();
    newFileList.splice(index, 1);
    this.setState({
      fileLists: newFileList
    });
    const content = this.formatImgData(newFileList).join(',');
    if (onChange) {
      onChange(content);
    }
  }
  formatImgData(fileList) {
    const formatData = [];
    fileList.forEach((obj) => {
      if (obj.isReturn) {
        formatData.push(obj.attachId);
      }
      if (obj.response && obj.response.status === 'SUCCESS') {
        formatData.push(obj.response.data.url);
      }
    });
    return formatData;
  }
  handleUploadChange(info) {
    const { fileLists } = this.state;
    const { onChange, getChange } = this.props;
    const { fileList, file } = info;
    this.setState({ fileLists: fileList });
    const content = this.formatImgData(fileList).join(',');
    if (onChange) {
      content && onChange(content);
    }
    if (getChange) {
      getChange(info);
    }
    if (file.status === 'done') {
      if (file.response.status === 'ERROR') {
        message.error(file.response.errorMsg || '图片上传失败');
        const index = fileLists.indexOf(file);
        const newFileList = fileLists.slice();
        newFileList.splice(index, 1);
        this.setState({ fileLists: newFileList });
      }
    }
    if (file.status === 'error') {
      message.error('图片上传失败');
      const index = fileLists.indexOf(file);
      const newFileList = fileLists.slice();
      newFileList.splice(index, 1);
      this.setState({ fileLists: newFileList });
    }
  }
  render() {
    const { uploadButton = uploadBtn, picLength,
      fileBizType, type = 'admin', listType } = this.props;
    const { fileLists = [] } = this.state;
    // 上传之前校验
    const beforeUpload = (file) => {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
      if (!isJPG) {
        message.error('文件格式须为jpg、jpeg、png');
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        message.error('文件须小于5兆');
      }
      return isJPG && isLt2M;
    };
    return (
      <div>
        <Upload
          name="file"
          action={`${getServer()[type]}/web/file/upload`}
          fileList={fileLists}
          data={{ fileBizType }}
          listType={listType}
          accept="image/jpg,image/jpeg,image/png"
          customRequest={this.customRequest}
          onRemove={this.onRemove}
          onPreview={file => previewImg({ imgUrl: (file.url || file.thumbUrl) })}
          beforeUpload={beforeUpload}
          onChange={this.handleUploadChange}
        >
          {fileLists.length >= picLength ? null : uploadButton}
        </Upload>
      </div>
    );
  }
}
